<template>
  <div class="changehistory">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="50%">
      <!-- 表单部分 -->
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="false"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="onPagination"
      />
    </el-dialog>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import { getList } from '@/api/system/changehistory'
export default {
  name: 'RecordModel',
  mixins: [mySetting],
  // 数据字典
  data() {
    return {
      dialogVisible: false,
      title: this.$t('modifyHistory'), // 弹窗标题
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        {
          prop: 'changeItem',
          label: this.$t('changeItem')
        },
        {
          prop: 'changeContent',
          label: this.$t('changeContent')
        },
        {
          prop: 'changeTime',
          label: this.$t('changeTime')
        },
        {
          prop: 'changeUserId',
          label: this.$t('operator')
        }
      ],
      rowId: ''
    }
  },
  methods: {
    handleOpen(row) {
      this.rowId = row.id
      getList({ ...this.listQuery, tableName: 'AMS_INFO', key: row.id }).then(res => {
        this.tableData = res.data
        this.total = res.total
        this.dialogVisible = true
      })
    },
    onPagination(page) {
      this.listQuery = page
      getList({ ...this.listQuery, tableName: 'AMS_INFO', key: this.rowId }).then(res => {
        this.tableData = res.data
        this.total = res.total
      })
    },
    // 关闭弹窗清空数据
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
